<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client</title>
</head>
<body>
    <h1>WebSocket Client</h1>
    <button onclick="sendMessage()">Send Message</button>
    <p id="response"></p>

    <script>
        let ws = new WebSocket("ws://localhost:8888/websocket");

        ws.onopen = function() {
            console.log("WebSocket connection opened.");
        };

        ws.onmessage = function(event) {
            document.getElementById("response").innerText = event.data;
            console.log("Received message: " + event.data);  // 接受到后端消息

        };

        ws.onclose = function() {
            console.log("WebSocket connection closed.");
        };

        function sendMessage() {
            let message = "Hello, WebSocket!";
            console.log("Sending message: " + message);
            ws.send(message);  // 向后端发消息
        }
    </script>
</body>
</html>
